<template>
  <div class="event-configuration">
    <div class="event-button">
      <je-button size="small" type="text" @click="handlerEvent">{{
        type == 'base' ? '全局事件' : '节点事件'
      }}</je-button>
    </div>
    <div v-for="(item, index) in eventData" :key="index" class="event-context">
      {{ index + 1 + '.  ' + item.typeName }}
    </div>
    <AddEventModal
      ref="addEvent"
      :type="type"
      :custom-event-listeners="eventData"
      :work-flow-info="workFlowInfo"
      @changeData="changeData"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Button, Hooks } from '@jecloud/ui';
  import AddEventModal from './modal/add-event.vue';

  export default defineComponent({
    name: 'EventConfiguration',
    components: {
      JeButton: Button,
      AddEventModal,
    },
    props: {
      type: {
        type: String,
        default: '',
      },
      customEventListeners: {
        type: Array,
        default: () => {
          return [];
        },
      },
      workFlowInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props, context) {
      const addEvent = ref(null);
      const eventData = Hooks.useModelValue({ props, context, key: 'customEventListeners' });
      // const eventData = ref(props.customEventlisteners);
      // watch(
      //   () => eventData.value,
      //   () => {
      //     emit('update:customEventlisteners', eventData.value);
      //   },
      // );
      //点击全局事件按钮
      const handlerEvent = () => {
        addEvent.value.visibleModule = true;
      };

      //给列表赋值
      const changeData = (data) => {
        eventData.value = data;
      };

      return { eventData, addEvent, handlerEvent, changeData };
    },
  });
</script>

<style lang="less" scoped>
  .event-configuration {
    .event-button {
      height: 32px;
      line-height: 32px;
      padding-left: 5px;
    }
    .event-context {
      height: 32px;
      line-height: 32px;
      border-top: 1px solid #e6e6e6;
      padding-left: 8px;
    }
  }
</style>
